import React, { PureComponent } from 'react';
// 引入样式
import './phone.scss';
// 引入框架
import { Input, Button, message } from 'antd';
// 发送axios
import Axios from 'axios';
// 引入接口
import { webSite } from '../../website'
export default class Phone extends PureComponent {
  constructor() {
    super()
    this.state = {
      // 手机号输入框
      input: '',
      // 卡号归属地
      Card: '',
      // 运营商
      Operators: '',
      // 区号
      AreaCode: '',
      // 邮编
      Postcode: ''
    }
  }
  // input的输入事件
  handleInput = ({ target }) => {
    let { name, value } = target
    // 设置input和state同步
    this.setState({
      [name]: value
    })
  }
  // 按钮的点击事件
  ClickPhone = () => {
    const _this = this;
    var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
    if (!this.state.input) {
      message.error({ content: '请输入手机号', className: 'bulletChatMessage' });
      return;
    } else if (!myreg.test(this.state.input)) {
      message.error({ content: '手机号格式不正确', className: 'bulletChatMessage' });
      return;
    }
    // 查询手机号码的请求
    Axios.create({
      baseURL: `${webSite}:3003`
    }).post("/lifePhone", { phone: this.state.input }).then(err => {
      if (err.data.code === 'F0003') {
        let data = err.data.data.result;
        _this.setState({
          // 卡号归属地
          Card: data.province + ' ' + data.city,
          // 运营商
          Operators: data.company,
          // 区号
          AreaCode: data.areacode,
          // 邮编
          Postcode: data.zip
        })
      }
    }).catch(() => {
      message.error({ content: '网络错误', className: 'bulletChatMessage' });
    })
  }

  render () {
    let { Card, Operators, AreaCode, Postcode } = this.state;
    return (
      <div className='phone'>
        <div className='phone_top'>
          <Input placeholder="请输入要查询的手机号码" className='phone_input' value={this.state.input} name='input' onChange={this.handleInput} autoComplete="off" maxLength='11' />
          <Button type="primary" className='phone_button' onClick={this.ClickPhone}>查询</Button>
        </div>
        <div className='phone_title'>
          <div className='phone_h1'>+++查询结果+++</div>
          <div className='phone_body'>
            {/* 左侧固定内容 */}
            <ul className='phone_body_left'>
              <li>卡号归属地</li>
              <li>运营商</li>
              <li>区号</li>
              <li>邮编</li>
            </ul>
            {/* 右侧显示的内容 */}
            <ul className='phone_body_right'>
              <li>{Card}</li>
              <li>{Operators}</li>
              <li>{AreaCode}</li>
              <li>{Postcode}</li>
            </ul>
          </div>
        </div>
      </div>
    )
  }
}